<template>
  <div class="message-settings">
    <van-nav-bar title="消息设置" />
    <van-switch v-model="settings.notificationsEnabled" @change="toggleNotifications">
      开启消息通知
    </van-switch>
    <van-cell-group>
      <van-cell title="互动消息" clickable @click="toggle('Interaction')">
        <template #right-icon>
          <van-switch v-model="settings.Interaction" size="small" />
        </template>
      </van-cell>
      <van-cell title="聊天消息" clickable @click="toggle('Chat')">
        <template #right-icon>
          <van-switch v-model="settings.Chat" size="small" />
        </template>
      </van-cell>
      <van-cell title="系统消息" clickable @click="toggle('System')">
        <template #right-icon>
          <van-switch v-model="settings.System" size="small" />
        </template>
      </van-cell>
      <van-cell title="交易通知" clickable @click="toggle('Transaction')">
        <template #right-icon>
          <van-switch v-model="settings.Transaction" size="small" />
        </template>
      </van-cell>
      <van-cell title="新种草发布提醒" clickable @click="toggle('NewRelease')">
        <template #right-icon>
          <van-switch v-model="settings.NewRelease" size="small" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Switch, Cell, CellGroup, NavBar } from 'vant';

const settings = ref({
  Enabled: true,
  Interaction: false,
  Chat: false,
  System: false,
  Transaction: false,
  NewRelease: false,
});

const toggle = (type) => {
  switch (type) {
    case 'Enabled':
     settings.value.Enabled = !settings.value.Enabled;
     break;
    case 'Interaction':
     settings.value.Interaction = !settings.value.Interaction;
     break;
    case 'Chat':
     settings.value.Chat = !settings.value.Chat;
     break;
    case 'System':
     settings.value.System = !settings.value.System;
     break;
    case 'Transaction':
     settings.value.Transaction = !settings.value.Transaction;
     break;
    case 'NewRelease':
     settings.value.NewRelease = !settings.value.NewRelease;
     break;
  }
};
</script>

<style scoped>
.message-settings {
  padding: 16px;
  background-color: #f5f5f5;
}
</style>